<template>
    <div>
        <global-tables @handleAllSelect="handleAllSelect" @changePage="handleChangePage" :list="list" :total="total" :loading="loading" :columns="columns" :current="search.Page">
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button class="features-btn" @click="handleBtnClick(null,'add')">
                                <Icon type="md-add" size="18" />新建
                            </Button>
                            <Button class="features-btn btn-auto-m" @click="handleBtnClick(null,'delete')">
                                <Icon type="md-trash" size="17" />删除
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入品牌名称">
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="600">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 15}">
                            <FormItem label="类别" prop="Type">
                                <Select v-model="formItem.Type" @on-change="handleChangeSelect">
                                    <Option value="1">文章</Option>
                                    <Option value="2">专区</Option>
                                    <Option value="3">商品</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 15}">
                            <FormItem label="标题">
                                <i-input v-model="formItem.Title"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 15}">
                            <FormItem label="内容" prop="content">
                                <Input v-model="formItem.content" @on-focus="handleSelectContent" placeholder="请选择内容" />
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 5}">
                            <FormItem label="图片">
                                <img-upload v-if="isImg" @delImgList="delImgList" :defaultList="imgDefaultList" :multiple="false" :data="{directory:'OrgPath'}" :value="'Picture'" :check="1" @setImgLIst="setImgLIst"></img-upload>
                            </FormItem>
                        </i-col>
                    </Row>
                    <Row>
                        <i-col :lg="{ span: 15}">
                            <FormItem label="描述">
                                <i-input type="textarea" v-model="formItem.ShortDes"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="isContentModal" :title="'选择内容'" width="900">
            <div v-if="isContentModal">
                <Row class="content" type="flex" justify="end">
                    <i-col :lg="{ span: 6}">
                        <input type="text" class="style-input" @keyup.enter="getContentList" v-model="contentsearch.keyword" placeholder="请输入商品名称">
                        <i-input style="display:none"></i-input>
                    </i-col>
                </Row>
                <Table :columns="contentColumns" :data="contentData"></Table>
                <div class="page-wrap">
                    <div class=" page-wrap-total">共 {{contentTotal}} 条</div>
                    <div>
                        <Page placement="top" :total="contentTotal" :current="contentsearch.pageindex" @on-change="changeContentPage" @on-page-size-change="changeContentPageSize"></Page>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button size="large" @click="isContentModal = false">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 板块明细
 */
import GlobalTables from "@/components/GlobalTables";
import ImgUpload from "@/components/ImgUpload";
import Api from "./service";

export default {
    name: "OnlinePartDetail",
    components: {
        GlobalTables,
        ImgUpload
    },
    data() {
        const validatorContent = (rule, value, callback) => {
            setTimeout(() => {
                const { content } = this.formItem;
                if (content == "" || content == "请选择内容") {
                    callback(new Error("请选择内容"));
                } else {
                    callback();
                }
            }, 100);
        };
        return {
            list: [],
            total: 0,
            itemId: 0,
            contentTotal: 0,
            isImg: true,
            loading: true,
            isModal: false,
            allSelectArr: null,
            isContentModal: false,
            imgDefaultList: [],
            imglist: [],
            ModalTitle: "新建明细",
            formItem: this.initFormItem(),
            search: {
                keyword: "",
                mid: 0,
                pageindex: 1,
                pagesize: 10
            },
            contentsearch: {
                keyword: "",
                pageindex: 1,
                pagesize: 10
            },
            ruleValidate: {
                Type: [
                    {
                        required: true,
                        message: "请输入类别",
                        trigger: "change"
                    }
                ],
                content: [
                    {
                        required: true,
                        validator: validatorContent,
                        trigger: "change"
                    }
                ]
            },
            contentColumns: [
                {
                    title: "商品图片",
                    width: 90,
                    render: (h, params) => {
                        const { PictureSmall } = params.row;
                        return h("div", [
                            h("Avatar", {
                                props: {
                                    src: PictureSmall,
                                    shape: "square",
                                    size: "large"
                                },
                                style: {
                                    margin: "5px 0"
                                }
                            })
                        ]);
                    }
                },
                {
                    title: "商品名称",
                    key: "ProName"
                },
                {
                    title: "操作",
                    width: "100",
                    align: "center",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        background: "#5ab1ef",
                                        border: "none",
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.handleContentClick(params.row);
                                        }
                                    }
                                },
                                "确定"
                            )
                        ]);
                    }
                }
            ],
            contentData: [],
            /* 表头 */
            columns: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "图片",
                    width: 70,
                    align: "center",
                    render: (h, params) => {
                        const { Picture } = params.row;
                        return h("div", [
                            h("Avatar", {
                                props: {
                                    src: Picture,
                                    shape: "square",
                                    size: "large"
                                },
                                style: {
                                    margin: "5px 0"
                                }
                            })
                        ]);
                    }
                },
                {
                    title: "类别",
                    width: 70,
                    render: (h, params) => {
                        const { Type } = params.row;
                        if (Type == 1) {
                            return h("div", [h("span", {}, "文章")]);
                        } else if (Type == 2) {
                            return h("div", [h("span", {}, "专区")]);
                        } else if (Type == 3) {
                            return h("div", [h("span", {}, "商品")]);
                        }
                    }
                },
                {
                    title: "名称",
                    key: "Title"
                },
                {
                    title: "描述",
                    key: "ShortDes"
                },
                {
                    title: "地址",
                    key: "SupplierName"
                },
                {
                    title: "操作",
                    width: 100,
                    key: "SupplierName",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        background: "#5ab1ef",
                                        border: "none",
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(
                                                params.row,
                                                "edit"
                                            );
                                        }
                                    }
                                },
                                "修改"
                            )
                        ]);
                    }
                }
            ]
        };
    },
    methods: {
        /* 图片删除 */
        delImgList(list) {
            this.imglist = list;
            this.imgType = false;
        },
        /* 图片上传 */
        setImgLIst(list) {
            this.imglist = list;
            this.imgType = true;
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 类别切换 */
        handleChangeSelect() {
            this.formItem.content = "请选择内容";
        },
        /* 内容分页 */
        changeContentPage(num) {
            this.contentsearch.pageindex = num;
            this.getContentList();
        },
        changeContentPageSize(num) {
            this.contentsearch.pagesize = num;
            this.getContentList();
        },
        /* 内容选择 */
        handleSelectContent() {
            if (this.formItem.Type == "") {
                this.$Message.error("请先选择类别");
            } else {
                this.isContentModal = true;
                switch (this.formItem.Type) {
                    case "3":
                        this.getContentList();
                        break;
                }
            }
        },
        /* 内容列表 */
        getContentList() {
            const data = this.contentsearch;
            Api.getContent(data).then(res => {
                if (res.state == "success") {
                    this.contentData = res.data.rows;
                    this.contentTotal = res.data.records;
                } else {
                    this.$Message.error("服务器错误");
                }
            });
        },
        /* 内容选择 */
        handleContentClick(item) {
            this.isContentModal = false;
            this.formItem.TID = item.ID;
            this.formItem.content = item.ProName;
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    let data = {
                        ...this.formItem,
                        MID: this.$route.params.id,
                        Picture: this.imglist[0] ? this.imglist[0].url : "",
                        ID: this.itemId
                    };
                    Api.addTablesItem(data).then(res => {
                        if (res.state == "success") {
                            this.$Message.success("操作成功");
                            this.loading = true;
                            this.isModal = false;
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            Api.getTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = "新建明细";
            this.formItem = this.initFormItem();
            this.imglist = [];
            this.imgDefaultList = [];
            if (type == "edit" || type == "add") {
                this.itemId = 0;
                if (type == "edit") {
                    this.itemId = item.ID;
                    this.ModalTitle = "修改明细";
                    Api.getItemInfo({
                        id: item.ID
                    }).then(res => {
                        this.isModal = true;
                        this.formItem = {
                            ...res.data
                        };
                        if (res.data.Picture) {
                            this.imgDefaultList.push({
                                url: res.data.Picture
                            });
                            this.imglist.push({
                                url: res.data.Picture
                            });
                        }
                    });
                } else {
                    this.isModal = true;
                }
            } else if (type === "delete") {
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要删除吗`,
                        onOk: () => {
                            Api.deleteItem({
                                ids: this.allSelectArr
                            }).then(res => {
                                if (res.state == "success") {
                                    this.$Message.success(res.message);
                                    this.allSelectArr = "";
                                } else {
                                    this.$Message.error(res.message);
                                }
                                this.getTablesListData();
                            });
                        },
                        onCancel: () => {
                            this.$Message.info("取消成功");
                        }
                    });
                } else {
                    this.$Message.error("请先选择需要操作的记录");
                }
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {
                Type: "",
                Url: "",
                Title: "",
                content: "请选择内容",
                TID: "",
                MID: "",
                ShortDes: "",
                Picture: ""
            };
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == "page") {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesizeize = page;
                this.getTablesListData();
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(",");
            }
            arr = arr.join(",");
            this.allSelectArr = arr;
        }
    },
    mounted() {
        this.search.mid = this.$route.params.id;
        /* 列表请求 */
        this.getTablesListData();
    }
};
</script>

<style lang="less" scoped>
.page-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.page-wrap-total {
    border-radius: 3px;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    margin: 0 20px;
    border: 1px solid #dcdee2;
}
.content {
    margin-bottom: 10px;
}
</style>